<template>
  <div>
    <el-dialog
      v-model="value"
      :title="title"
      :width="width"
      :before-close="handleClose"
      :fullscreen="fullscreen"
      :draggable="draggable"
      :center="center"
      :close-on-click-modal="false"
    >
      <slot name="content"></slot>
      <template #footer>
      <slot name="footer"></slot>

        <!-- <span class="dialog-footer">
          <el-button @click="$emit('update:dialogValue',value = false)">取消</el-button>
          <el-button type="primary" @click="confirm" color="#081F42" v-if="confirm">
            確定
          </el-button>
        </span> -->
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch,onMounted } from "vue";
  import bus from '@/common/bus.js'
const props = defineProps({
  title: String,
  width: String,
  dialogValue: Boolean,
  fullscreen:Boolean,
  draggable:Boolean,
  center:Boolean
});
const value = ref(false);
watch(() => props.dialogValue,
  (newVal, oldVal) => {
    value.value = newVal
  }
);
const emit = defineEmits(['update:dialogValue'])
const handleClose = (done) => {
  value.value = false;
 emit('update:dialogValue',value.value)
};
</script>

<style  scoped>
</style>